<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery/jquery-3.7.1.js"></script>
		<style type="text/css">
			.text{background:red;}
			.text2{background:blue;}
		</style>
		
	</head>
	<body>
		<ul>
			<li>桂花</li>
			<li class="text2">梅花</li>
			<li>菊花</li>
		</ul>
		<input id="btn1" type="button" value="在第一个“ul”中原有列表项之后添加一个“兰花”列表项" />
		<input id="btn2" type="button" value="设置第一个“ul”的“class”属性为“text”"/>
		<input id="btn3" type="button" value="将第一个“ul”的“梅花”列表项替换为“樱花”"/>
		<ul><ul>
	</body>
	<script>
			// 获取第一个ul和第二个ul
			const firstUl = document.querySelector('ul');
			const secondUl = document.querySelectorAll('ul')[1]; // 第二个ul
		
		    // 为第一个ul中的li元素设置鼠标单击事件
		    firstUl.addEventListener('click', function (event) {
		        if (event.target.tagName === 'LI') {
		            const listItem = event.target.cloneNode(true); // 复制当前li元素
		            secondUl.appendChild(listItem); // 将复制的li添加到第二个ul
		        }
		    });
			
			// 为第一个ul中的li元素设置鼠标双击事件
			firstUl.addEventListener('dblclick', function (event) {
			    if (event.target.tagName === 'LI') {
			        const listItem = event.target; // 当前li元素
			        secondUl.insertBefore(listItem, secondUl.firstChild); // 移动到第二个ul的头部
			    }
			 });
			 
			// 为第一个按钮设置鼠标单击事件
			document.getElementById('btn1').addEventListener('click', function () {
			    const newListItem = document.createElement('li'); // 创建新li元素
			    newListItem.textContent = '兰花'; // 设置文本内容
			     firstUl.appendChild(newListItem); // 添加到第一个ul
		   });
				
			// 为第二个按钮设置鼠标单击事件
			document.getElementById('btn2').addEventListener('click', function () {
			     firstUl.className = 'text'; // 设置class属性为"text"
			 });
			
			// 为第三个按钮设置鼠标单击事件
			 document.getElementById('btn3').addEventListener('click', function () {
				const liToReplace = Array.from(firstUl.children).find(li => li.textContent === '梅花'); // 查找“梅花”列表项
			    if (liToReplace) {
			         liToReplace.textContent = '樱花'; // 替换为“樱花”
			      }
			});

				
	</script>
</html>